<template>
  <div id="app">
    <div>=========== 插值 ============</div>
    <div>{{ message }}</div>

    <div>=========== 条件语句 ============</div>
    <router-link to="./conditionDemo">goCondition</router-link>

    <div>=========== 循环语句 ============</div>
    <router-link to="./loopDemo">goLoop</router-link>

    <div>=========== 表单 ============</div>
    <router-link to="./tableDemo">goTable</router-link>

    <div>=========== 计算属性 ============</div>
    <router-link to="./computedDemo">goComputed</router-link>

    <div>=========== 观察属性 ============</div>
    <router-link to="./watchDemo">goWatch</router-link>

    <div>=========== 绑定样式 ============</div>
    <router-link to="./styleDemo">goStyle</router-link>

    <div>=========== 组件 ============</div>
    <HelloWorld :msg="msg" @changeMsg="changeMsg"></HelloWorld>

    <div>=========== 路由 ============</div>
    <router-link to="./routerDemo">goRouter</router-link>

    <div>=========== axios ============</div>
    <button @click="request1">axios.post</button>
    <button @click="request2">axios.get</button>

    <div>=========== 生命周期 ============</div>
    <router-link to="./lifecycle">goLifecycle</router-link>

    <div>=========== vuex ============</div>
    <div>count: {{ count }}</div>
    <router-link to="./VuexDemo">goVuexDemo</router-link>

    <div>=========== sass ============</div>
    <router-link to="./SassDemo">goSass</router-link>

    <div>=========== 滚动 ============</div>
    <router-link to="./ScrollDemo">goScroll</router-link>

    <div>=========== 拖拽 ============</div>
    <router-link to="./DraggableDemo">goDraggable</router-link>
    <br />
    <router-link to="./DraggableDemo1">goDraggable1</router-link>

    <div>=========== 轮播图 ============</div>
    <router-link to="./SliderDemo">goSlider</router-link>
    <br />
    <router-link to="./SliderDemo1">goSlider1</router-link>

    <div>=========== iframe传值 ============</div>
     <router-link to="./FrameDemo">goFrame</router-link>

    <div>=========== 日期控件传值 ============</div>
    <router-link to="./DataPicker">DataPickerDemo</router-link>

    <div>=========== npm ============</div>
    <router-link to="./npmDemo">npmDemo</router-link>
  </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld";
import testService from "../common/service/testService";
export default {
  components: {
    HelloWorld,
  },
  data() {
    return {
      message: "Hello Vue!",
      msg: "父传子",
    };
  },
  methods: {
    changeMsg(data) {
      console.log(data);
    },
    request1() {
      testService.testPost({
        id: 1,
      });
    },
    request2() {
      testService.testGet(23);
    },
  },
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
div,
button {
  margin: 10px 0;
}
</style>
